{% block select2_widget %}
{% spaceless %}

<textarea id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" class="expand">{{ form.vars.value }}</textarea>
<div class="select2-row row agregar">
    <div class="nine columns">
        <input type="text" id="text_{{ form.vars.id }}" class="expand" value="">
    </div>
    <div class="three columns">
        <button id="btn_{{ form.vars.id }}" type="button" class="button radius label agregar"> <i class="icon-plus"></i>  Agregar</button>
    </div>
</div>


<script type="text/javascript">
    $(function() {
        $("#{{ form.vars.id }}").select2({
            tags:[],
            readonly: true,
            separator: "|"
        });
    });
    $("#btn_{{ form.vars.id }}").click(function() 
	{
        var existentVal = $("#{{ form.vars.id }}").val();
        var newVal = $("#text_{{ form.vars.id }}").val();
        if(newVal)
        {
			if(existentVal)
			{
				$("#{{ form.vars.id }}").val(existentVal + "|" +  newVal).trigger("change"); //concateno un tag a los axistentes
			}else{
				$("#{{ form.vars.id }}").val(newVal).trigger("change"); //agrego un tag
			}
            
            $("#text_{{ form.vars.id }}").val("");
        }
        
    });
</script>

{% endspaceless %}
{% endblock %}